<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
        
        <title>Typography Documentation</title>
        
        <script src="/js/greyspots.js" type="text/javascript"></script>
        <link href="/css/greyspots.css" type="text/css" rel="stylesheet" />
        
        <script src="/js/ace/ace.js" data-ace-base="/js/ace/" type="text/javascript" charset="utf-8"></script>
        <script src="/js/ace/ext-language_tools.js" type="text/javascript"></script>
        <script src="/js/ace/ext-searchbox.js" type="text/javascript"></script>
        
        <script src="doc-library/doc.js" type="text/javascript"></script>
        <link href="doc-library/doc.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <gs-jumbo>
            <h1 class="text-center">Typography</h1>
        </gs-jumbo>
            
        <gs-container min-width="sml;med;lrg">
            <h3>Description:</h3>
            <p>These classes and tags are used to convey information without you having to worry about making everything look nice.</p>
            
            <h1>Examples:</h1>
            <div class="doc-example-description">
                <span class="h3">Headers:</span>
                <p>Headers by default have padding. The <code>&lt;small&gt;</code> tag can be used for secondary text. Using a span with a class <code>.h1</code> to <code>.h6</code> gives you the same text styling, but no padding.</p>
            </div>
            <gs-doc-example>
                <template for="html" height="auto">
                    <h1>Heading 1 <small>Secondary Text</small></h1>
                    <h2>Heading 2 <small>Secondary Text</small></h2>
                    <h3>Heading 3 <small>Secondary Text</small></h3>
                    <h4>Heading 4 <small>Secondary Text</small></h4>
                    <h5>Heading 5 <small>Secondary Text</small></h5>
                    <h6>Heading 6 <small>Secondary Text</small></h6>
                    <span class="h1">Heading 1 <small>Secondary Text</small></span><br/>
                    <span class="h2">Heading 2 <small>Secondary Text</small></span><br/>
                    <span class="h3">Heading 3 <small>Secondary Text</small></span><br/>
                    <span class="h4">Heading 4 <small>Secondary Text</small></span><br/>
                    <span class="h5">Heading 5 <small>Secondary Text</small></span><br/>
                    <span class="h6">Heading 6 <small>Secondary Text</small></span>
                </template>
            </gs-doc-example>
            
            <div class="doc-example-description">
                <span class="h3">Paragraph:</span>
                <p>Paragraphs, (<code>&lt;p&gt;</code> tags) somtimes have a header right above.</p>
            </div>
            <gs-doc-example>
                <template for="html" height="auto">
                    <h1>Heading 1 <small>Secondary Text</small></h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </template>
            </gs-doc-example>
            
            <div class="doc-example-description">
                <span class="h3">Leading Paragraph:</span>
                <p>Use the <code>.lead</code> class to make a paragraph stand out from the other paragraphs.</p>
            </div>
            <gs-doc-example>
                <template for="html" height="auto">
                    <h1>Heading 1 <small>Secondary Text</small></h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </template>
            </gs-doc-example>
            
            <div class="doc-example-description">
                <span class="h3">Inline Text Modifiers:</span>
                <p>There are several modifiers to the text that come from html5.</p>
            </div>
            <gs-doc-example>
                <template for="html" height="auto">
                    <p>Normal Text. <mark>Marked text.</mark> <del>Deleted text.</del> <s>Strike-Through text.</s> <ins>Inserted text.</ins> <u>Underlined text.</u> <small>Small text.</small> <b>Bold text.</b> <strong>Strong text.</strong> <em>Emphaized text.</em> <i>Italic text.</i> Some <sup>super</sup>script. Some <sub>sub</sub>script.</p>
                </template>
            </gs-doc-example>
            
            <div class="doc-example-description">
                <span class="h3">Horizontal Rule:</span>
                <p>Use the <code>&lt;hr/&gt;</code> tag make a logical seperation between sections of the page.</p>
            </div>
            <gs-doc-example>
                <template for="html" height="auto">
                    <h1>Heading 1 <small>Secondary Text</small></h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    <hr/>
                    <h1>Heading 1 <small>Secondary Text</small></h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </template>
            </gs-doc-example>
            
            <div class="doc-example-description">
                <span class="h3">Text Alignment:</span>
                <p>Use the these classes to align the text.</p>
                <ul>
                    <li>The <code>.text-left</code> class aligns the text to the left.</li>
                    <li>The <code>.text-right</code> class aligns the text to the right.</li>
                    <li>The <code>.text-center</code> class centers the text.</li>
                    <li>The <code>.text-justify</code> class increases and decreases the space between words so the line always ends at the right edge.</li>
                    <li>The <code>.text-nowrap</code> class prevents wrapping of the text.</li>
                </ul>
            </div>
            <gs-doc-example>
                <template for="html" height="auto">
                    <p class="text-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            
                    <p class="text-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    
                    <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    
                    <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    
                    <p class="text-nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </template>
            </gs-doc-example>
            
            <div class="doc-example-description">
                <span class="h3">Text Transformation:</span>
                <p>Use the these classes to tranform the text.</p>
                <ul>
                    <li>The <code>.text-lowercase</code> class makes the entire text lowercase.</li>
                    <li>The <code>.text-uppercase</code> class makes the entire text uppercase.</li>
                    <li>The <code>.text-capitalize</code> class capitalizes the first letter of each word.</li>
                </ul>
            </div>
            <gs-doc-example>
                <template for="html" height="auto">
                    <p class="text-lowercase">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            
                    <p class="text-uppercase">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    
                    <p class="text-capitalize">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </template>
            </gs-doc-example>
            
            <div class="doc-example-description">
                <span class="h3">Background and Text Colors:</span>
                <p>Use these attributes to change the color of the background and text. It's important not to get caught up in the colors too much, use the name of the attribute as its purpose. Use <code>[bg-danger]</code> or <code>[txt-danger]</code> for error messages and possible problems. (Like deleting a file) Use <code>[bg-warning]</code> and <code>[txt-warning]</code> for warnings, etc..</p>
                <ul>
                    <li>The <code>[txt-muted]</code> attribute makes the text gray.</li>
                    <li>The <code>[txt-primary]</code> attribute makes the text dark blue.</li>
                    <li>The <code>[txt-success]</code> attribute makes the text green.</li>
                    <li>The <code>[txt-info]</code> attribute makes the text light blue.</li>
                    <li>The <code>[txt-warning]</code> attribute makes the text orange.</li>
                    <li>The <code>[txt-danger]</code> attribute makes the text red.</li>
                    <li>The <code>[bg-muted]</code> attribute does not exist.</li>
                    <li>The <code>[bg-primary]</code> attribute makes the background dark blue.</li>
                    <li>The <code>[bg-success]</code> attribute makes the background green.</li>
                    <li>The <code>[bg-info]</code> attribute makes the background light blue.</li>
                    <li>The <code>[bg-warning]</code> attribute makes the background yellow.</li>
                    <li>The <code>[bg-danger]</code> attribute makes the background red.</li>
                </ul>
            </div>
            <gs-doc-example>
                <template for="html" height="auto">
                    <p txt-muted>Muted</p>
                    <p txt-primary>Primary</p>
                    <p txt-success>Success</p>
                    <p txt-info>Info</p>
                    <p txt-warning>Warning</p>
                    <p txt-danger>Danger</p>
                    
                    <p bg-muted>Muted (no such background, use text-)</p>
                    <p bg-primary>Primary</p>
                    <p bg-success>Success</p>
                    <p bg-info>Info</p>
                    <p bg-warning>Warning</p>
                    <p bg-danger>Danger</p>
                </template>
            </gs-doc-example>
            
            <div class="doc-example-description">
                <span class="h3">Table Background Colors:</span>
                <p>Use these attributes to change the color of the background. It's important not to get caught up in the colors too much, use the name of the attribute as its purpose.</p>
                <ul>
                    <li>The <code>[bg-success]</code> attribute makes the background green.</li>
                    <li>The <code>[bg-warning]</code> attribute makes the background yellow.</li>
                    <li>The <code>[bg-danger]</code> attribute makes the background red.</li>
                    <li>The <code>[bg-info]</code> attribute makes the background light blue.</li>
                </ul>
            </div>
            <gs-doc-example>
                <template for="html" height="auto">
                    <table>
                        <tr><td>0</td><td>Test</td></tr>
                        <tr><td>1</td><td>Test</td></tr>
                        <tr bg-success><td>2</td><td>Test</td></tr>
                        <tr bg-success><td>3</td><td>Test</td></tr>
                        <tr><td>4</td><td>Test</td></tr>
                        <tr><td>5</td><td>Test</td></tr>
                        <tr bg-warning><td>6</td><td>Test</td></tr>
                        <tr bg-warning><td>7</td><td>Test</td></tr>
                        <tr><td>8</td><td>Test</td></tr>
                        <tr><td>9</td><td>Test</td></tr>
                        <tr bg-danger><td>10</td><td>Test</td></tr>
                        <tr bg-danger><td>11</td><td>Test</td></tr>
                        <tr><td>12</td><td>Test</td></tr>
                        <tr><td>13</td><td>Test</td></tr>
                        <tr bg-info><td>14</td><td>Test</td></tr>
                        <tr bg-info><td>15</td><td>Test</td></tr>
                        <tr><td>16</td><td>Test</td></tr>
                        <tr><td>17</td><td>Test</td></tr>
                    </table>
                </template>
            </gs-doc-example>
            
            <div class="doc-example-description">
                <span class="h3">Abbreviations:</span>
                <p>Use the <code>&lt;abbr&gt;</code> tag to explain an abbreviation. Put the full text of the abbreviation in the <code>[title]</code> attribute. Use the <code>.initialism</code> class to make the abbreviation uppercase and a little smaller then the rest of the text. When the user hovers over the abbreviation, it will show the full text.</p>
            </div>
            <gs-doc-example>
                <template for="html" height="auto">
                    <p><abbr title="Captain">Capt.</abbr> Kirk and <abbr title="Lieutenant" class="initialism">Lt.</abbr> Spock.</p>
                </template>
            </gs-doc-example>
            
            <div class="doc-example-description">
                <span class="h3">Addresses:</span>
                <p>Use the <code>&lt;address&gt;</code> tag to wrap contact information.</p>
            </div>
            <gs-doc-example>
                <template for="html" height="auto">
                    <address>
                        <strong>Workflow Products, L.L.C.</strong><br>
                        7813 Harwood Road<br>
                        North Richland Hills, Texas 76180<br>
                        <abbr title="Phone">P:</abbr> (817) 503-9545
                    </address>
                    <address>
                        <strong>Justin Tocci</strong><br>
                        <a href="mailto:jtocci@wfprod.com">jtocci@wfprod.com</a>
                    </address>
                </template>
            </gs-doc-example>
            
            <div class="doc-example-description">
                <span class="h3">Blockquote:</span>
                <p>Use the <code>&lt;blockquote&gt;</code> tag to wrap a quote. Use the <code>&lt;small&gt;</code> tag or preferably the <code>&lt;footer&gt;</code> tag for the attribution. Cite the source with the <code>&lt;cite&gt;</code> tag and the <code>[title]</code> attribute. Use the <code>.pull-right</code> class to align the quote to the right.</p>
            </div>
            <gs-doc-example>
                <template for="html" height="auto">
                    <blockquote>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <small>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</small></p>
                        <footer>Someone famous in <cite title="Source Title">Source Title</cite>
                    </blockquote>
                    <blockquote class="pull-right">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <small>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</small></p>
                        <footer>Someone famous in <cite title="Source Title">Source Title</cite>
                    </blockquote>
                </template>
            </gs-doc-example>
            
            <div class="doc-example-description">
                <span class="h3">Lists:</span>
                <p>Use the standard <code>&lt;ul&gt;</code> tag for a unordered list, the <code>&lt;ol&gt;</code> tag for ordered lists, and the <code>&lt;li&gt;</code> tag for items. The <code>.list-unstyled</code> class removes the extra styling around that list, but not for sub-lists. The <code>.list-inline</code> class will put all the items on the same line.</p>
            </div>
            <gs-doc-example>
                <template for="html" height="auto">
                    <h1>List <small>Unordered with sub-list</small></h1>
                    <ul>
                        <li>First Item</li>
                        <li>Second Item</li>
                        <li>Third Item
                            <ul>
                                <li>First Item</li>
                                <li>Second Item</li>
                                <li>Third Item</li>
                            </ul>
                        </li>
                    </ul>
                    
                    <h1>List <small>Ordered</small></h1>
                    <ol>
                        <li>First Item</li>
                        <li>Second Item</li>
                        <li>Third Item</li>
                    </ol>
                    
                    <h1>List <small>Unordered Unstyled, sub-list is styled</small></h1>
                    <ul class="list-unstyled">
                        <li>First Item</li>
                        <li>Second Item</li>
                        <li>Third Item
                            <ul>
                                <li>First Item</li>
                                <li>Second Item</li>
                                <li>Third Item</li>
                            </ul>
                        </li>
                    </ul>
                    
                    <h1>List <small>Inline</small></h1>
                    <ul class="list-inline">
                        <li>First Item</li>
                        <li>Second Item</li>
                        <li>Third Item</li>
                    </ul>
                </template>
            </gs-doc-example>
            
            <div class="doc-example-description">
                <span class="h3">Lists:</span>
                <p>Use the standard <code>&lt;dl&gt;</code> tag for a list of terms. The <code>&lt;dt&gt;</code> tag is for term names, and the <code>&lt;dd&gt;</code> tag is term descriptions. The <code>.dl-horizontal</code> class puts the term on a column to the left, and the descriptions to the right. However, if the screen is too small it will go back to the original styling.</p>
            </div>
            <gs-doc-example>
                <template for="html" height="auto">
                    <h1>Description List <small>Regular</small></h1>
                    <dl>
                        <dt>First Item</dt>
                        <dd>Description of item.</dd>
                        <dt>Second Item</dt>
                        <dd>Description of item.</dd>
                        <dt>Third Item</dt>
                        <dd>Description of item.</dd>
                    </dl>
                    
                    <h1>Description List <small>Horizontal</small></h1>
                    <dl class="dl-horizontal">
                        <dt>First Item</dt>
                        <dd>Description of item.</dd>
                        <dt>Second Item</dt>
                        <dd>Description of item.</dd>
                        <dt>Third Item</dt>
                        <dd>Description of item.</dd>
                    </dl>
                </template>
            </gs-doc-example>
            
            <div class="doc-example-description">
                <span class="h3">Code:</span>
                <p>There are several tags you can use to format code. You can nest them, but you don't have to.</p>
                <ul>
                    <li>Use the <code>&lt;code&gt;</code> tag for an inline snippet.</li>
                    <li>Use the <code>&lt;kbd&gt;</code> tag for a command you should type.</li>
                    <li>Use the <code>&lt;pre&gt;</code> tag for a block of code.</li>
                    <li>Use the <code>&lt;var&gt;</code> tag for a variable, such as in an equation.</li>
                    <li>Use the <code>&lt;samp&gt;</code> tag for a block of output.</li>
                </ul>
            </div>
            <gs-doc-example>
                <template for="html" height="auto">
                    <h1>Code <small>Inline Snippet</small></h1>
                    <p>For example, <code>&lt;section&gt;</code> should be wrapped as inline.</p>
                    
                    <h1>Code <small>User Input</small></h1>
                    <p>To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br />
                    To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd></p>
        
                    <h1>Code <small>Basic block</small></h1>
                    <p><pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre></p>
                    
                    <h1>Code <small>Variables</small></h1>
                    <p><var>y</var> = <var>m</var><var>x</var> + <var>b</var></p>
                    
                    <h1>Code <small>Output</small></h1>
                    <samp>This text is meant to be treated as sample output from a computer program.</samp>
                </template>
            </gs-doc-example>
        </gs-container>
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
    </body>
</html>